<template>
  <div class="bd">
    <!-- 表单数据的编辑 -->
    <el-form :model="form" label-width="auto">
      <el-table :data="form.list" style="width: 460px">
        <el-table-column prop="name" label="姓名" width="120">
          <template #default="{ row, $index }">
            <!-- 思考：此处的prop值是怎么对应的？实现rules规则的校验 -->
            <el-form-item
              :prop="`list[${$index}].name`"
              :rules="[{ required: true, message: '请输入' }]"
            >
              <el-input v-model="row.name" placehoder="请输入" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="120" />
        <el-table-column prop="subjects" label="科目">
          <template #default="{ row }">
            {{ row.subjects.join(',') }}
            <!-- 会有什么问题， undefined join... -->
            <el-button @click="handleSubject(row)" :icon="Compass" circle />
            <!-- 

              如何记录当前点击的行，并将子组件中选中的值，返回到当前行中。

              1、记录当前行的索引或者uid。 如果新增状态，使用索引，则需要在新增时， 记录唯一的索引（例如，使用最大值）；
              编辑的时候，使用uid，返显时，将数据赋值给对应的行。

              ---- 一旦数据结构比较复杂，比如多层级嵌套，该方法将变得难以维护。

              2、记录当前项(通常使用响应式变量记录)，该当前项为引用赋值，即当前项记录的是该行数据指向的地址（指针)，当在子组件中
              修改后， 抛出一个事件，传给父组件， 将该指针对应的值进行修改，即可实现对应行的响应式修改。proxy

              --- 无论列表的数据结构如何复杂，记录的始终是当前操作行的地址。
             -->
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div style="margin-top: 20px">
      <el-button @click="handleAdd">添加</el-button>
    </div>

    <!-- 选择科目的弹框 -->
    <!-- 

      :visible="visible"
      @update:visible="val=>visible=val"

      
     -->
    <subject-selector
      v-model:visible="visible"
      :current-subjects="currentUser.subjects"
      @change-subjects="handleChangeSubjects"
    />
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import SubjectSelector from './components/SubjectSelector.vue'
import { Compass } from '@element-plus/icons-vue'
// import { emptyRow } from './transportData'
const emptyRow = () => ({ subjects: [] })
//
const form = reactive({
  list: []
})

// 新增
const handleAdd = () => {
  form.list.push(emptyRow())
}

// 编辑科目
const currentUser = ref(emptyRow())
// const currentUser = ref({ subjects: [] })
// 这样写会有什么问题？ ---
// const currentUser = ref()

const visible = ref(false)
const loading = ref(false)
// 思考一下，此处的prop传值，是否有其他实现方式？？
const handleSubject = (row) => {
  // 将当前点击的行 赋值给 响应式的变量（当前操作数据）， 这里赋值的数据是地址，也就是指针
  // loading.value = true
  currentUser.value = row
  visible.value = true
}

// 修改当前人员的科目
const handleChangeSubjects = (subjects) => {
  currentUser.value.subjects = subjects
}
</script>
